import { Card, Result } from 'antd';
import React, { useEffect, useState } from 'react';
import PubSub from 'pubsub-js';

function ContentPanel({ height, name, code }) {
  const [id, setId] = useState();
  const [catalogId, setCatalogId] = useState();

  useEffect(() => {
    PubSub.subscribe(`${code}_selectLeaf`, (_topic, leaf) => {
      setId(leaf.key);
      setCatalogId(undefined);
    });
    PubSub.subscribe(`${code}_selectCatalog`, (_topic, catalog) => {
      setId(undefined);
      setCatalogId(catalog.key);
    });
    PubSub.subscribe(`${code}_unselect`, () => {
      setId(undefined);
      setCatalogId(undefined);
    });
    return () => {
      PubSub.unsubscribe(`${code}_selectLeaf`);
      PubSub.unsubscribe(`${code}_selectCatalog`);
      PubSub.unsubscribe(`${code}_unselect`);
    };
  }, [code]);

  let content;

  if (id) {
    content = 'id';
  } else if (catalogId) {
    content = 'catalogId';
  } else {
    content = (
      <div className="vertical_center">
        <Result status="404" subTitle="暂无校验器数据" />
      </div>
    );
  }

  return (
    <Card title={`${name}管理`} className="cute" style={{ height }} bodyStyle={{ padding: '16px' }}>
      {content}
    </Card>
  );
}

export default ContentPanel;
